<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .bg {
      background-color: yellow;
    }
  </style>
</head>

<body>
  <!-- 用户名三位，密码六位 -->
  <input type="text" id="name"><br>
  <input type="text" id="pw"><br>
  <input type="button" id="btn" value="提交">
  <script>
    var text1 =document.getElementById("name");
    var text2 =document.getElementById("pw");
    var btn =document.getElementById("btn");
    // var nvalue = text1.value;
    // var mvalue = text2.value;
    console.log(text1);
    // btn.onclick = function () {
    //   // var nvalue = text1.value;
    // // var mvalue = text2.value;
    // // var nbc = getComputedStyle(text1,null);
    // // var mbc = getComputedStyle(text2,null)
    //   // console.log(text1.value.length);
    //   if (text1.value.length <3 || text1.value.length >6 ) {
    //     // nbc.backgroundColor = "yellow";
    //     // mbc.backgroundColor = "white";
    //     text1.classList.add("bg");
    //     text2.classList.remove("bg");

    //   } else if (text1.value.length >=3 && text1.value.length<=6 && (text1.value.length < 6 || text1.value.length > 8) ) {
    //     // nbc.backgroundColor = "white";
    //     // mbc.backgroundColor = "yellow";
    //     text2.classList.add("bg");
    //     text1.classList.remove("bg");
    //   }
    //   else if (text1.value.length >=3 && text1.value.length<=6 && text1.value.length >= 6 &&text1.value.length <= 8) {
    //     // nbc.backgroundColor = "white";
    //     // mbc.backgroundColor = "white";
    //     text1.classList.remove("bg");
    //     text2.classList.remove("bg");
    //     console.log("提交");
    //   }
    // }
    btn.onclick = function () {
      if (text1.value.length >=3 && text1.value.length<=6 ) {
        if (text2.value.length >= 6 &&text2.value.length <= 8) {
          text1.classList.remove("bg");
          text2.classList.remove("bg");
          console.log("提交");
        }else{
          text2.classList.add("bg");
          text1.classList.remove("bg");
        }
      }else {
        text1.classList.add("bg");
        text2.classList.remove("bg");
      }
    }
  </script>
</body>

</html>